import React, { useRef } from 'react';

import { PlusOutlined } from '@ant-design/icons';
import {
  ModalForm,
  ProFormTextArea,
  ProFormText,
  ProFormRadio,
  ActionType,
} from '@ant-design/pro-components';
import { Button, Form, message } from 'antd';

import { DictType } from '.';

function CreateForm(props: { actionRef: ActionType }) {
  const actionRef = useRef<ActionType>(props.actionRef);
  const [form] = Form.useForm<DictType>();
  return (
    <ModalForm<DictType>
      title="新建字典类型"
      initialValues={{
        status: 0,
      }}
      trigger={
        <Button type="primary">
          <PlusOutlined />
          新建字典类型
        </Button>
      }
      form={form}
      autoFocusFirstInput
      modalProps={{
        maskClosable: false,
        destroyOnClose: true,
        onCancel: () => console.log('run'),
      }}
      submitTimeout={2000}
      onFinish={async (values: any) => {
        const res = await $post('/system/dict/type', { data: { ...values } });
        const isSuccess = res.code === 200;
        if (isSuccess) {
          message.success('添加字典类型成功');
          actionRef?.current?.reload();
        }
        return isSuccess;
      }}
    >
      <ProFormText required name="dictName" label="字典名称" />
      <ProFormText required name="dictType" label="字典类型" />
      <ProFormRadio.Group
        name="status"
        label="状态"
        radioType="button"
        options={[
          {
            label: '正常',
            value: 0,
          },
          {
            label: '停用',
            value: 1,
          },
        ]}
      />
      <ProFormTextArea name="remark" label="备注" />
    </ModalForm>
  );
}

export default CreateForm;
